<template>
    <div class="setting_conttent box">
        <div class="tt box">
            <input type="number" v-model = "phone" placeholder="绑定手机号" class="box">
            <div class="code_div box">
                <input type="text" v-model = "phoneCode" placeholder="输入验证码" class="box fl">
                <label class="fr" @click = "getCodeBtn()">{{codeContent}}</label>
            </div>
            <button @click = "onSaveBtn()">保存</button>
        </div>
        
    </div>
</template>
<script>
    import { Toast } from 'vant'
    import { getCode,settingPhone } from "@/api/setting";

    export default { 
        data () {
            return {
                phone: '',
                phoneCode: '',
                codeContent: '获取验证码',
                count: '',
                timer: null,
            }
        },
        methods: {
            onSaveBtn () {
                let phone = this.phone;
                let phoneCode = this.phoneCode;
                if (!phone & !phoneCode) {
                    Toast.fail({message:'请输入正确信息', duration: 1000});
                    return;
                }
                this.settingPhone(phone,phoneCode);
            },
            getCodeBtn () {
                let phone = this.phone; 
                if (!phone) {
                    Toast.fail({message:'请输入正确手机号', duration: 1000});
                    return;
                }
                this.getCode(phone);
            },
            getCode(phone){
                let storeId = this.$store.state.userInfo.store_id
                let that = this
                getCode({storeId: storeId, phone: phone, handlerType: 'reset'}).then(res => {
                    if(res.code === 20001){
                       Toast.fail({message: res.info, duration: 1000}); 
                    } else {
                        this.timerTime()
                       Toast.success({message: res.info, duration: 1000}); 

                    }  
                })
            },
            settingPhone(phone,phoneCode){
                let that = this
                settingPhone({phone: phone, code: phoneCode}).then(res => {
                    if(res.code === 20001){
                       Toast.fail({message: res.info, duration: 1000}); 
                    } else {
                       Toast.success({message: '保存成功', duration: 1000}); 
                       this.$router.go(-1);
                    }
                })
            },
            timerTime () {
                let _vm = this;
                // 控制倒计时及按钮是否可以点击
                const timeCount = 60
                _vm.count = timeCount
                _vm.timer = window.setInterval(() => {
                    if (_vm.count > 0 && _vm.count <= timeCount){
                        // 计时秒数
                        _vm.count--
                        
                        _vm.codeContent = _vm.count + 's后重新获取'
                    } else {
                         
                        _vm.codeContent = '获取验证码'
                        // 清空定时器!!!
                        clearInterval(_vm.timer)
                        _vm.timer = null
                    }
                }, 1000)
            }
            
        },
        mounted() {
            this.phone = this.$store.state.userInfo.phone
        },
            

    }
</script>
<style lang="stylus" scoped>
    .setting_conttent 
        width 100% 
        height 100vh 
        overflow hidden 
        background #f5f5f5
        position relative
        .tt
            position absolute
            left 0
            width 100% 
            height 100vh 
            padding .3rem
            input,label 
                width 100%
                height .9rem
                line-height .9rem
                overflow hidden
                border-radius 8px
                border 1px solid #eee
                background #fff
                padding 0 .3rem
            .code_div
                width 100%
                margin-top .2rem
                overflow hidden
                input
                     width 60%
                label 
                    width 30%
                    text-align center
                    color #000
                    padding 0 .2rem
            button 
                width 100%
                height .9rem
                line-height .9rem
                overflow hidden
                border-radius 8px
                border: 1px solid #d64532
                background: #d64532
                margin .4rem auto
                color #fff

</style>
 
 
